<script setup>
import { computed } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'default',
    validator: (value) => ['primary', 'default', 'warning', 'danger'].includes(value)
  },
  size: {
    type: String,
    default: 'normal',
    validator: (value) => ['large', 'normal', 'small'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  block: {
    type: Boolean,
    default: false
  }
})

const buttonClass = computed(() => {
  return {
    'common-button': true,
    [`common-button--${props.type}`]: true,
    [`common-button--${props.size}`]: true,
    'common-button--block': props.block,
    'common-button--disabled': props.disabled || props.loading
  }
})
</script>

<template>
  <button 
    :class="buttonClass"
    :disabled="disabled || loading"
    @click="$emit('click', $event)"
  >
    <template v-if="loading">
      <view class="loading-icon"></view>
    </template>
    <slot></slot>
  </button>
</template>

<style lang="scss">
.common-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 32rpx;
  font-size: 28rpx;
  height: 88rpx;
  border-radius: 8rpx;
  
  &--primary {
    background: #3cc51f;
    color: #ffffff;
  }
  
  &--default {
    background: #f8f8f8;
    color: #333333;
  }
  
  &--warning {
    background: #ff976a;
    color: #ffffff;
  }
  
  &--danger {
    background: #ee0a24;
    color: #ffffff;
  }
  
  &--large {
    width: 100%;
    height: 100rpx;
    font-size: 32rpx;
  }
  
  &--small {
    height: 64rpx;
    padding: 0 16rpx;
    font-size: 24rpx;
  }
  
  &--block {
    display: flex;
    width: 100%;
  }
  
  &--disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  
  .loading-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 12rpx;
    border: 2rpx solid #ffffff;
    border-radius: 50%;
    border-color: #ffffff transparent transparent;
    animation: loading 0.8s linear infinite;
  }
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 